<template>
  <div>
    <div style="margin-bottom: 16px">
      <a-button type="primary" :disabled="!hasSelected" :loading="loading" @click="start">
        Reload
      </a-button>
      <span style="margin-left: 8px">
        <template v-if="hasSelected">
          {{ `Selected ${selectedRowKeys.length} items` }}
        </template>
        <template slot="operation" slot-scope="text, record">
        <a-popconfirm
            v-if="columns.length"
            title="Sure to delete?"
            @confirm="() => onDelete(record.key)"
        >
          <a href="javascript:;">Delete</a>
        </a-popconfirm>
      </template>
      </span>
    </div>
    <a-table
        bordered
        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        :columns="columns"
        :data-source="data"
    />
  </div>
</template>
<script>
const columns = [
  {
    title: '用户账号',
    dataIndex: 'updateBy',
  },
  {
    title: '用户姓名',
    dataIndex: 'realname',
  },
  {
    title: '头像',
    dataIndex: 'avatar',
  },
  {
    title: '性别',
    dataIndex: 'sex_dictText',
  },
  {
    title: '生日',
    dataIndex: 'birthday',
  },
  {
    title: '手机号码',
    dataIndex: 'phone',
  },
  {
    title: '部门',
    dataIndex: 'orgCode',
  },
  {
    title: '负责部门',
    dataIndex: 'address',
  },
  {
    title: '状态',
    dataIndex: 'status_dictText',
  },
  {
    title: '操作',
    dataIndex: 'address',
  },
];

const data = [];
for (let i = 0; i < 46; i++) {
  data.push({
    key: i,
    name: `Edward King ${i}`,
    age: 32,
    address: `London, Park Lane no. ${i}`,
  });
}

export default {
  data() {
    return {
      data,
      columns,
      selectedRowKeys: [], // Check here to configure the default column
      loading: false,
    };
  },
  computed: {
    hasSelected() {
      return this.selectedRowKeys.length > 0;
    },
  },
  methods: {
    start() {
      this.loading = true;
      // ajax request after empty completing
      setTimeout(() => {
        this.loading = false;
        this.selectedRowKeys = [];
      }, 1000);
    },
    onDelete(key) {
      const dataSource = [...this.dataSource];
      this.dataSource = dataSource.filter(item => item.key !== key);
    },
    onSelectChange(selectedRowKeys) {
      console.log('selectedRowKeys changed: ', selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
    },
  },
};
</script>
